<script setup>
import { onBeforeMount, ref } from 'vue'
import { getCloudDataApi, deleteCloudSongApi } from '@/apis/cloud.js'
import { useAudioStore } from '@/stores/audioStore'
import CloudDiskUpload from './components/CloudDiskUpload.vue'
import { ElMessage, ElMessageBox } from 'element-plus';

const useAudio = useAudioStore()

const cloudData = ref([])

onBeforeMount(async () => {
  const { data } = await getCloudDataApi()
  cloudData.value = data.data.map(item => item.simpleSong)
})

// 播放歌曲
const playSong = async (item, index) => {
  await useAudio.getSongUrl(item, index)
  useAudio.audioRef.play()
  // 将目前获取的歌单保存至播放列表
  useAudio.activeSongList = cloudData.value
}

// 删除云盘中的歌曲
const deleteSong = async (id) => {
  ElMessageBox.confirm(
    '确定要从云盘删除此歌曲吗？',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      const { data } = await deleteCloudSongApi(id)
      if (data.code === 200) {
        const index = cloudData.value.findIndex(item => item.id === id)
        cloudData.value.splice(index, 1)
        ElMessage.success('删除成功')
      } else {
        ElMessage('删除出错')
      }
    })
}

</script>

<template>
  <div class="cloud-disk-box">
    <div class="cloud-song-box" v-for="(item, index) in cloudData" :key="item.id" @click="playSong(item, index)"
      ref="cloudSong">
      <div class="song-info">
        <span class="index">
          {{ index + 1 < 10 ? '0' + (index + 1) : index + 1 }} </span>
            <img v-lazy-image="item.al?.picUrl" alt="专辑图片">
            <span class="name ellipsis">
              {{ item.name }}
            </span>
      </div>
      <span class="author ellipsis">
        <template v-if="item.ar">
          {{ item.ar[0].name ? item.ar[0].name + ' -' : '' || '未知作者' }} {{ item.al?.name || '' }}
        </template>
      </span>
      <span class="time cyan-tips" v-if="useAudio.songResult.id === item.id">播放中</span>
      <span class="time" v-format-millisec="item.dt" v-else></span>
      <el-popover placement="bottom" :offset="-5" popper-style="min-width: 100px;width: 108px;padding: 4px;"
        trigger="click">
        <template #reference>
          <span class="iconfont icon-gengduo" @click.stop></span>
        </template>
        <div class="popover-text">
          <p @click="deleteSong(item.id)">删除</p>
        </div>
      </el-popover>
    </div>
    <div class="none-data" v-show="cloudData.length === 0">
      <img src="@/assets/noneData.png" alt="">
      <p>空空如也</p>
    </div>
  </div>
  <CloudDiskUpload @uploadEnd="cloudData.unshift($event)" />
</template>

<style scoped lang='scss'>
.cloud-disk-box {
  margin: 0 auto;
  max-width: 1165px;

  .cloud-song-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    margin: 10px 0px;
    color: $assistText;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    padding: 0px 30px;
    cursor: pointer;

    &:hover {
      box-shadow: 0px 4px 4px rgba(164, 164, 164, 0.2);
    }

    span {
      display: inline-block;
    }

    .song-info {
      display: flex;
      align-items: center;

      .index {
        width: 40px;
      }

      img {
        height: 50px;
        width: 50px;
        border-radius: 50%;
        margin-left: 5px;
      }

      .name {
        margin-left: 10px;
        width: 270px;
      }
    }

    .author {
      width: 240px;
    }

    .time {
      width: 100px;
    }

    .icon-gengduo {
      font-size: 26px;
    }
  }

  .none-data {
    width: 500px;
    margin: 98px auto;

    img {
      width: 100%;
    }

    p {
      text-align: center;
      color: #949494;
      font-weight: bold;
      margin-bottom: 50px;
      letter-spacing: 2px;
      font-size: 15px;
    }
  }
}

.cyan-tips {
  color: #1dc779;
}

.popover-text {
  cursor: pointer;

  p {
    width: 100px;
    line-height: 35px;
    text-align: center;
    border-radius: 3px;
    letter-spacing: 1px;

    &:hover {
      background-color: #8867f2;
      color: #fff;
    }
  }
}
</style>
